
Vue.component2('a_1_0_2_21_1_move_line', {  
    template: `
        <div style="position:absolute" id="a_1_0_2_21_1_move_line" class="a_1_0_2_21_1_lines"
        
        >
    <div style="display: flex;
    align-items: center;
    border: 1px solid #b9b9b9;
    border-radius: 4px;
    padding-left: 4px;
    padding-right: 4px;">
        <span  v-if="data.icon1_show_flag" class="icon iconfont icon-add_temp"></span>
        
        <span style="color:#bcbcbc">{{data.name}}</span>
        </div>
        </div>
`,
data(){
    return{
        show_flag:true,
        data:{
            name:"333",
            _space_:0,
        }
    }
}})


Vue.component2('a_1_0_2_21_1', {  
    template: `
        <div ref="dom" :class="{ 'a_1_0_2_21_1_lines test': data.true, 'a_1_0_2_21_1_lines_onclick': data.onclick_flag }" @click="handle_click" v-show="show_flag"
        
        
    @mousemove="mousemove_"  
    @mouseup="mouseup_" 
    @mouseleave="mouseleave_" 
    @mouseenter="mouseenter_"
    @mousedown="mousedown_"
        >
        <span :style="'padding-left: '+data._space_+'px;'"></span>
    <div style="display: flex;
    align-items: center;
    border: 1px solid #b9b9b9;
    border-radius: 4px;
    padding-left: 4px;
    padding-right: 4px;">
        <span  v-if="data.icon1_show_flag" class="icon iconfont icon-add_temp"></span>
        
        <span  class="a_1_0_2_21_1_hid_line" style="color:#bcbcbc">{{data.name}}</span>
        </div>

        <div style="display:inline-block;flex:1;height:100%">
        <div style="display:flex;
    justify-content: flex-end;
    display: flex;height:100%">
    
        <div  @click="click1($event,k)" v-for="(v,k) in data.icon_data"
        :key="k">
         <a_1_0_3_0_0 style="display: inline-block;"
         :deepcopy_data="v"></a_1_0_3_0_0>
        </div>
        <div   style="
    color: rgba(231, 231, 231, 0.6);display: inline-block; border: 1px solid rgb(185, 185, 185);
    width: 20px;
    height: 100%;" 
@click="change_version">
        <div style="margin-top:3px">{{data.info.version}}</div>
        </div>
        </div>
        </div>



















        </div>
`,
data(){
    return{
        show_flag:true,
        data:{
            info:{"version":"0"},
            onclick_flag:false,
            tree_data:{},//
            icon_data:{},
            icon1_show_flag:true,
            click:null,
            click_obj:null,
            true:true,
            recv_data:null,
            false:false,
            close:true,
            name:"",
            _space_:0,
        }
    }
},
methods:{
    mousemove_:function(event){

    },
    mouseup_:function(event){

    },
   mouseleave_:function(event){

   },
    mouseenter_:function(event){

    },
    change_version:function(){
        this.$prompt('输入版本号', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(({ value }) => {
            try{

                let par=JSON.parse(JSON.stringify(this.data.params));
                par.value=value;
                par.key=this.data.info.temp_id+'_'+this.data.info.version;
                par.path=this.data.path;
                this.data.修改后端组件版本_request({
                    body_data:par,
                });
            }catch (err){
                console.log("err"+err)
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消输入'
            });       
          });
    },
    绘制跟随鼠标移动的dom:function(event){
        let xy=this.get_x_y(event,"dom");
        if(!window.a_1_0_2_21_1_move_obj){
            // 创建跟随鼠标的元素  
            let dom = document.createElement('a_1_0_2_21_1_move_line'); 
            dom.setAttribute('ref', 'ref_obj');
            document.body.appendChild(dom);  
            let vue_dct={'el':dom,data:{true:true,false:false,null:null,deepcopy_data:this.data}}
            window.a_1_0_2_21_1_move_obj=new Vue(vue_dct);
        }
        this.鼠标移动时移动dom(xy.x,xy.y);
        a_1_0_2_21_1_move_obj.$refs['ref_obj'].data.name=this.data.name;
        a_1_0_2_21_1_move_obj.$el.style.visibility='visible';
    },
    鼠标移动时移动dom:function(x,y){
        // 获取 ID 为 "xxx" 的 DOM 元素  
        var element = document.getElementById('a_1_0_2_21_1_move_line');  
        
        // 检查元素是否存在  
        if (element) {  
        // 设置 left 和 top 样式属性  
        element.style.left =(Number(x)-30)+'px'; 
        element.style.top =(Number(y)-30)+'px';  
        } else {  
        console.error('Element with ID "a_1_0_2_21_1_move_line" not found!');  
        }
    },
    鼠标移动时移动dom2:function(event){
        // 获取 ID 为 "xxx" 的 DOM 元素  
        var element = document.getElementById('a_1_0_2_21_1_move_line');  
        
        // 检查元素是否存在  
        if (element) {  
        // 设置 left 和 top 样式属性  
        element.style.left =(Number(event.clientX)-30)+'px'; 
        element.style.top =(Number(event.clientY)-30)+'px';  
        } else {  
        console.error('Element with ID "a_1_0_2_21_1_move_line" not found!');  
        }
    },
    鼠标up时回收dom:function(){
        let _this=this;
        _this.data.全局鼠标操作对象1.unset_move({"key":"拖拽后端组件",
            key2:"鼠标移动时移动dom2",});
        _this.data.全局鼠标操作对象1.unset_up({"key":"拖拽后端组件",
            key2:"鼠标up时回收dom",});
        
        a_1_0_2_21_1_move_obj.$el.style.visibility='hidden';
    },
    mousedown_:function(event){
        let _this=this;
        console.log("_this.data.全局鼠标操作对象1",_this.data,_this.data.全局鼠标操作对象1)
        
        _this.data.全局鼠标操作对象1.set_move({
            key:"拖拽后端组件",
            key2:"鼠标移动时移动dom2",
            func:_this.鼠标移动时移动dom2,
        });
        _this.data.全局鼠标操作对象1.set_up({
            key:"拖拽后端组件",
            key2:"鼠标up时回收dom",
            func:_this.鼠标up时回收dom,
        });
        _this.data.全局鼠标操作对象1.set_data({
            key:"拖拽后端组件",
            data:_this.data.info
        });
        this.绘制跟随鼠标移动的dom(event);
    },





    handle_click:async function(event){
        //点击当前 高亮显示
        try{//console.log("高亮",this.data.path);
this.data.tree_data.set_onclick_flag(this.data.path)}catch{}
        // /* console.log("我点击了一次")*/
        try{
            // if(!this.data.recv_data){
                // await this.data.刷新();
            // }
            
        
            /*console.log("?2")*/}
        catch{}

        if (this.data.click){
            try{
                this.data.click(event)
            
                // console.log("start click2")
            }
            catch{}
            return 
        }


        if (this.data.click_obj){
            try{
                lhp_run_func(this.data.click_obj.func,this.data.click_obj.args)
            
                // console.log("start click3")
            }
            catch{}
            return 
        }
        try{
            this.data.click_handle(this.data.path,this.data.close);
        }catch{}
    },
    click1:async function(event,k){
       /* console.log(',,,',this.data.icon_data[k].click)*/
        lhp_run_func(this.data.icon_data[k].click);
        if(!this.data.click_stop){event.stopPropagation();}//阻止父级

    }
},

mounted:function(){
_this.data.全局鼠标操作对象1=_this.deepcopy_data.tree_data.全局鼠标操作对象1;

let urls=_this.deepcopy_data.tree_data.url;
_this.data.修改后端组件版本_request=request______({method:'post',url:urls.修改后端组件版本_url});
//通过路由获取当前项目  所在的 用户id  项目目录  项目id
let getQueryParams=function () {  
    const queryParams = {};  
    const urlParams = new URLSearchParams(window.location.search);  
    for (const [key, value] of urlParams.entries()) {  
        queryParams[key] = value;  
    }  
    return queryParams;  
}  
_this.data.params=getQueryParams();

_this.data.icon_data={
    
    
  297:{
    icon_class:"icon iconfont icon-fuzhi",
    hovertext:"复制组件id",
    add_show:false,
    click:async function(){
        console.log("当前路径:",_this.data.path)
      if(!_this.data.dir1_id){
        let path_l=_this.data.path.split(".");
        _this.data.dir1_id=path_l[path_l.length-3];
        _this.data.dir2_id=path_l[path_l.length-2];
        _this.data.temp_id=path_l[path_l.length-1];
    }
    
    let copy_data=_this.data.info.temp_id+'_'+_this.data.info.version;
      copy_text(copy_data); 
      Vue.prototype.$notify({type: 'success',message: '已拷贝:'+copy_data})

  },
},
}


}

})